<template>
	<div>
		<header class="navigation" v-if="type == 'wap'">
			<div><img src="../assets/rightbut.png" @click="retreat"></div>
			<div>{{details.title}}</div>
			<div></div>
		</header>
		
		<div class="advertising">
			<mt-swipe :auto="4000">
				<mt-swipe-item v-for='item in details.banner'>
				  <img :src="item">
				</mt-swipe-item>
			</mt-swipe>
		</div>
		
		<div class="goodscon">
			
			<div class="goodsconList" v-for='item in goodsconList' @click="jd(item.id,item.couponMoney)" v-if="item.spuPlatform == 'jd'">
				<div class="goodsconImg">
					<img :src="item.mainImageUrl">
					<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
				</div>
				<div class="goodsconName">
					<img src="../assets/jingxaun.png">
					{{item.goodsName}}
				</div>
				<div class="primaryprice">
					<span>￥{{item.price}}/</span>
					<span>降{{item.couponMoney}}元</span>
				</div>
				<div class="cashprice">
					<span>￥{{item.conPrice}}</span>
					<span>已抢{{item.totalSales}}件</span>
				</div>
				<div class="immediately">立即抢购</div>
			</div>
			
			<div class="goodsconList" v-for='item in goodsconList' @click="pdd(item.id)" v-if="item.spuPlatform == 'pdd'">
				<div class="goodsconImg">
					<img :src="item.mainImageUrl">
					<i class="jdSymbol" v-if="item.spuPlatform == 'pdd'"></i>
				</div>
				<div class="goodsconName">
					<img src="../assets/jingxaun.png">
					{{item.goodsName}}
				</div>
				<div class="primaryprice">
					<span>￥{{item.price}}/</span>
					<span>降{{item.couponMoney}}元</span>
				</div>
				<div class="cashprice">
					<span>￥{{item.conPrice}}</span>
					<span>已抢{{item.totalSales}}件</span>
				</div>
				<div class="immediately">立即抢购</div>
			</div>
			
			<div class="goodsconList" v-for='item in goodsconList' @click="yh(item.id)" v-if="item.spuPlatform == 'yh'">
				<div class="goodsconImg">
					<img :src="item.mainImageUrl">
					<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
				</div>
				<div class="goodsconName">
					<img src="../assets/jingxaun.png">
					{{item.goodsName}}
				</div>
				<div class="primaryprice">
					<span>￥{{item.price}}/</span>
					<span>降{{item.couponMoney}}元</span>
				</div>
				<div class="cashprice">
					<span>￥{{item.conPrice}}</span>
					<span>已抢{{item.totalSales}}件</span>
				</div>
				<div class="immediately">立即抢购</div>
			</div>
			
		</div>
		
		
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				details:[],
				goodsconList:[],
				id:'',
				type:'',
				activity:'',
			}
		},
		created(){
			this.id = this.$route.query.activityId;
			this.activity = this.$route.query.activity;
			this.type = this.$route.query.type;
			if(this.activity == 'activity'){
				
				var url = BaseUrl + 'market/activityDetail?id=' + this.id;
				this.$http.post(url).then(res => {
//					console.log(res)
					if(res.data.code == "10000"){
						this.details = res.data.data;
						this.goodsconList = res.data.data.list;
					}else{
						Toast({
							message: des.data.msg,
							position: 'middle',
							duration: 3000
						})
					}
					
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			}else{
				//轮播图详情
				var url = BaseUrl + 'market/bannerDetail?id=' + this.id;
				this.$http.post(url).then(res => {
//					console.log(res.data.data.list);
					if(res.data.code == "10000"){
						this.details = res.data.data;
						this.goodsconList = res.data.data.list;
					}else{
						Toast({
							message: des.data.msg,
							position: 'middle',
							duration: 3000
						})
					}
					
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			}
			
		},
		methods:{
			//跳转
			jd:function(id, couponMoney){
				this.commodity(id, couponMoney); //全局事件
			},
			pdd:function(id){
				this.pddcommodity(id); //全局事件
			},
			yh:function(id){
				this.yhcommodity(id); //全局事件
			},
			//导航退后
			retreat:function(){
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped="scoped">
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.24rem;
		color: #323232;
		font-size: 0.36rem;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	.advertising{
		height: 3.6rem;
	}
	.advertising img{
		width: 100%;
		height: 100%;
		display: block;
	}
	.goodscon{
		overflow: hidden;
		background: #fff;
	}
	.goodsconList{
		width: 49%;
		padding: 0.2rem 0 0 0;
		background: #fff;
		float: left;
	}
	.goodsconList:nth-child(odd){
		margin-right: 0.12rem;
	}
	.goodsconImg img{
		width: 3.69rem;
		height: 3.69rem;
		display: block;
	}
	.goodsconName{
		height: 1rem;
		display: -webkit-inline-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #333333;
		letter-spacing: 0.28px;
		padding: 0.19rem 0.14rem 0 0.19rem;
		margin-bottom: 0.16rem;
	}
	.goodsconName img{
		width: 0.7rem;
		height: 0.33rem;
	}
	.primaryprice{
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		letter-spacing: 0;
		padding: 0 0.14rem 0.05rem 0.19rem;
	}
	.primaryprice span:nth-child(1){
		color: #C0C0C0;
		text-decoration: line-through;
	}
	.primaryprice span:nth-child(2){
		color: #ff2040;
	}
	.cashprice{
		padding: 0 0.14rem 0.2rem 0.19rem;
		display: flex;
		justify-content: space-between;
	}
	.cashprice span:nth-child(1){
		font-family: PingFangSC-Medium;
		font-size: 0.3rem;
		color: #FF2040;
		letter-spacing: 0;
	}
	.cashprice span:nth-child(2){
		font-family: PingFangSC-Regular;
		font-size: 0.2rem;
		color: #ABABAB;
		letter-spacing: 0;
	}
	.immediately{
		padding: 0.08rem 0.14rem 0.08rem 0.19rem;
		background: #ff2040;
		border-radius: 0.3rem;
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: center;
	}
	.jdSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/jd.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		right: -3.01rem;
    	margin-top: -0.66rem;
	}
	.yhSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/yh.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		right: -3.01rem;
    	margin-top: -0.66rem;
	}
</style>